<template>
  <div class="follow-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="我的关注">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <van-tabs v-model="active" color="#3296fa" sticky animated swipeable>
      <van-tab title="家服公司">
        <company-info v-for="item in companys" :key="item.id" :companys="item" :distance="false" />
        <van-empty v-if="!user" description="请登录后查看" @click="$router.push('/login')" />
        <van-empty v-else-if="!companys.length" description="暂无关注家服公司" />
      </van-tab>
      <van-tab title="家服人员">
        <staff-info v-for="item in staffs" :key="item.id" :staffs="item" />
        <van-empty v-if="!user" description="请登录后查看" @click="$router.push('/login')" />
        <van-empty v-else-if="!staffs.length" description="暂无关注家服人员" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getFollows } from '@/api/user'
import { getCompanys } from '@/api/company'
import { getStaffs } from '@/api/staff'
import { mapState } from 'vuex'

export default {
  name: 'Follow',
  components: {},
  props: {},
  data () {
    return {
      active: 0,
      follows: {},
      companys: [],
      staffs: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  created () {
    if (this.user) {
      this.initFollows()
    }
  },
  mounted () {},
  methods: {
    async initFollows () {
      try {
        this.follows = await getFollows({ userId: this.user.id })
        this.loadCompanys()
        this.loadStaffs()
      } catch (error) {
        console.log(error)
      }
    },
    async loadCompanys () {
      const companys = []
      this.follows.company = this.follows.company.filter(item => item.isFollow ? item : false)
      this.follows.company.forEach(async item => companys.push(await getCompanys({ ...item })))
      this.companys = companys
    },
    async loadStaffs () {
      const staffs = []
      this.follows.staff = this.follows.staff.filter(item => item.isFollow ? item : false)
      this.follows.staff.forEach(async item => staffs.push(await getStaffs({ ...item })))
      this.staffs = staffs
    }
  }
}
</script>

<style scoped lang="less">
.follow-container {
  .van-cell__title {
    text-align: center;
    color: #969799;
  }
}
</style>
